<!--
 * @Description: 问题反馈
 * @Author: Caroline
 * @Date: 2024-01-16 20:06:31
 * @LastEditTime: 2024-06-23 00:08:27
 * @LastEditors: Caroline
 * @FilePath: \education-offical-admin-web\src\views\feedback\list.vue
-->
<template>
  <div class="biz-box-wrap">
    <!-- 1、搜索区 -->
    <el-form
      :inline="true"
      :model="state.dataForm"
      @keyup.enter="state.getDataList()"
    >
      <!-- 关键字 -->
      <el-form-item>
        <el-input
          v-model="state.dataForm.keyword"
          placeholder="请输入问题或内容搜索"
          clearable
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-button @click="state.getDataList()">查询</el-button>
      </el-form-item>
    </el-form>

    <!-- 2、表格区 -->
    <el-table
      max-height="calc(100vh - 256px)"
      v-loading="state.dataListLoading"
      :data="state.dataList"
      border
      @selection-change="state.dataListSelectionChangeHandle"
      @sort-change="state.dataListSortChangeHandle"
      style="width: 100%"
    >
      <!-- 2.1、表格列 -->
      <el-table-column
        type="index"
        label="序号"
        header-align="center"
        align="center"
        width="60"
      ></el-table-column>
      <el-table-column
        prop="title"
        label="标题"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="content"
        label="问题描述"
        header-align="center"
        align="center"
      />
    </el-table>
    <el-pagination
      :current-page="state.page"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="state.limit"
      :total="state.total"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="state.pageSizeChangeHandle"
      @current-change="state.pageCurrentChangeHandle"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const view = reactive({
  getDataListURL: "/edu/problem/feedback/page",
  getDataListIsPage: true,
  deleteIsBatch: true,
  dataForm: {
    keyword: "",
    orderField: "create_date",
  },
});

const state = reactive({ ...useView(view), ...toRefs(view) });
</script>
<style lang="less" scoped>
.task-img {
  width: 100px;
  height: 70px;
  object-fit: contain;
}
</style>
